<template>
    <div class="carInfoConetnt">
        <ul class="carContent">
            <li class="carContentItem">
                <img src="~@/assets/images/jz/totle.jpg" alt="" srcset="">
                <div class="text">
                    <div class="textTxt">物流车辆总数</div>
                    <div class="dataContent">
                        <span class="num">{{totalCount}}<span class="unit">个</span></span>

                    </div>
                </div>
            </li>
            <li class="carContentItem">
                <img src="~@/assets/images/jz/nomal.jpg" alt="" srcset="">
                <div class="text">
                    <div class="textTxt">普通货车数</div>
                    <div class="dataContent">
                        <span class="num">{{normalCount}}<span class="unit">个</span></span>

                    </div>
                </div>
            </li>
            <li class="carContentItem">
                <img src="~@/assets/images/jz/dangerCar.jpg" alt="" srcset="">
                <div class="text">
                    <div class="textTxt">危化品车数</div>
                    <div class="dataContent">
                        <span class="num">{{dangerCount}}<span class="unit">个</span></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
  </template>
<script>
import { getExpressVehicleInfos } from '@/api/express'

export default {
  data() {
    return {
      totalCount: 0,
      normalCount: 0,
      dangerCount: 0
    }
  },
  mounted() {
    getExpressVehicleInfos().then(res => {
      if (res?.success) {
        const { vehicleCount = [] } = res.result || {}
        vehicleCount.forEach(item => {
          if (item.xcoordinate === '普通货车') {
            this.normalCount = item.ycoordinate
          } else if (item.xcoordinate === '危险品车') {
            this.dangerCount = item.ycoordinate
          } else {
            this.totalCount = item.ycoordinate
          }
        })
      }
    })
  }
}
</script>
  <style lang="less">
    .carInfoConetnt{
        // background: red;
        margin-top: 213px;
        .carContent{
            .carContentItem{
                display: inline-flex;
                align-items: center;
                width: 805px;
                margin-right: 270px;
                img{
                    display: inline-block;
                    height: 276px;
                    width: 276px;
                    margin-right: 50px;
                }
                .text{
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 476px;
                    height: 276px;
                    .textTxt{
                        font-size: 68px;
                        color: rgba(255, 255, 255, 0.64);
                    }
                    .dataContent{
                        .num{
                        width: 279px;
                        font-family: YouSheBiaoTiHei;
                        font-size: 150px;
                        font-weight: normal;
                        line-height: 155.17px;
                        letter-spacing: 0px;
                        color: rgba(255, 255, 255, 0.87);
                        white-space: nowrap;
                    }
                    .unit{
                        width: 60px;
                        font-family: SourceHanSansCN-Regular;
                        font-size: 60px;
                        font-weight: normal;
                        color: rgba(255, 255, 255, 0.64);
                    }
                    }
                }
            }
        }
    }
  </style>
